<template>
  <div class="footer-wrap">
    <div class="page-footer">
      <div class="web-footer">
        <div class="footer-left">
          <img src="@/static/engineering5188/footer/address.png" />
          <div class="info">
            <div class="title">公司地址</div>
            <div class="text">湖北省武汉市江岸区发展大道357号田园
              商务大厦1207室</div>
          </div>
        </div>

        <div class="footer-center">
          <img src="@/static/engineering5188/footer/hotline.png" />
          <div class="info">
            <div class="title">全国服务热线</div>
            <div class="text">+86 0-123-456-7890（业务咨询）</div>
          </div>

        </div>
        <div class="footer-right">
          <img src="@/static/engineering5188/footer/letter.png" />
          <div class="info">
            <div class="title">期待您的来信</div>
            <div class="text">dexinggongcheng@188.com</div>
          </div>
        </div>
      </div>
      <div class="beian-box">
        <div class="beian">
          Copyright © 2025 武汉德星网络科技有限公司版权所有 
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "web-footer",

  props: [],
  data() {
    return {

    };
  },
  computed: {



  },
  watch: {},

  created() { },

  methods: {},
};
</script>

<style scoped lang="less">
.root {
  width: 100%;
  min-height: 236px;
}

.page-footer {
  padding-top: 56px;
  background: #222222;
  color: #fff;
  overflow: hidden;
}



.web-footer {
  width: @engineerwidth;
  margin: 0 auto;
  margin-bottom: 51px;
  display: flex;
  align-items: center;

  .footer-left {
    flex: 1;
    width: 33.33%;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 34px;
      height: 40px;
    }

    .info {
      margin-left: 16px;

      .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: #B8B8B8;
        text-align: left;
      }

      .text {
        margin-top: 5px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
        text-align: left;
        max-width: 283px;
        flex-wrap: wrap;
      }
    }
  }

  .footer-center {
    flex: 1;
    width: 33.33%;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 40px;
      height: 40px;
    }

    .info {
      margin-left: 20px;

      .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: #B8B8B8;
        text-align: left;
      }

      .text {
        margin-top: 5px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
        text-align: left;
        max-width: 283px;
        flex-wrap: wrap;
      }
    }
  }

  .footer-right {
    flex: 1;
    width: 33.33%;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 40px;
      height: 30px;
    }

    .info {
      margin-left: 12px;

      .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: #B8B8B8;
        text-align: left;
      }

      .text {
        margin-top: 5px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
        text-align: left;
        max-width: 283px;
        flex-wrap: wrap;
      }
    }
  }
}

.beian-box {
  text-align: center;
  border-top: 1px solid rgba(171, 173, 178, 0.4);
  padding-top: 18px;
  padding-bottom: 28px;

  .beian {
    font-family: Arial, Arial;
    font-weight: 400;
    font-size: 12px;
    color: #B8B8B8;
    line-height: 25px;
    text-align: center;
    font-style: normal;
  }


}
</style>
